<script setup>
	import { ref } from 'vue';
	import { get } from '@/api/http';
	import { useRoute } from 'vue-router';
	import { computed } from 'vue';
	const route = useRoute();
	const { id } = route.query;

	const info = ref({});
	const userInfo = computed(() => info.value?.orderUserDtos?.[0]);
	get('getOrderInfo', { recordId: id }).then((data) => {
		data && (info.value = data);
	});
</script>

<template>
	<section class="min-h-full p-25px bg-#f3f3f3 text-4">
		<div>
			<header>场馆预约</header>
			<main class="list">
				<li>
					预约类型：<span>{{ info.orderType ? '团队预约' : '个人预约' }}</span>
				</li>
				<li>
					参观日期：<span>{{ info.orderDate?.slice(0, 10) }}</span>
				</li>
				<li>
					入馆时段：<span>{{ info.startDate }}-{{ info.endDate }}</span>
				</li>
			</main>
		</div>

		<div>
			<header>凭「核销码」直接验证入馆</header>
			<main class="p-20px flex-col-center">
				<span>预约人：{{ userInfo?.userName }}</span>
				<img
					:src="userInfo?.qrCode"
					alt=""
				/>
				<span>入馆凭证码</span>
			</main>
		</div>
		<div class="list">
			<li>
				订单编号： <span>{{ info.orderCode }}</span>
			</li>
			<li>
				下单时间：<span>{{ info.orderDate }}</span>
			</li>
		</div>
		<div class="list">
			<li>参观人员信息</li>
			<li>
				{{ userInfo?.userName }}<span>{{ userInfo?.idCard }}</span>
			</li>
		</div>
	</section>
</template>

<style lang="less" scoped>
	section > * {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 10px;
		> header {
			margin-bottom: 10px;
			padding-bottom: 15px;
			border-bottom: 1px solid #c9c6c658;
		}
	}
	.list {
		li {
			display: flex;
			justify-content: space-between;
			font-size: 1rem;
			line-height: 2rem;
			color: #6c727f;
			span {
				color: #333;
			}
		}
	}
</style>
